<template>
  <div id="aside-menu" ref="visibleMenuRef" :class="{ 'show-bottom': $store.state.playInfo.isShowAsideBottom }">
    <my-scrollbar>
      <el-menu
        :unique-opened="false"
        :router="true"
        :default-active="defaultActive"
        ref="menuRef">
        <!-- 推荐 -->
        <el-submenu index="recommend">
          <template #title>推荐</template>
          <el-menu-item index="/main/discover/recommend">
            <i class="iconfont icon-yinle"></i>
            <span>发现音乐</span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <i class="iconfont icon-diantai"></i>
            <span>私人FM</span>
          </el-menu-item>
          <el-menu-item index="1-3">
            <i class="iconfont icon-video"></i>
            <span>视频</span>
          </el-menu-item>
        </el-submenu>
        <!-- 我的音乐 -->
        <!-- <el-submenu index="2" :disabled="!isLogin">
          <template #title>我的音乐</template>
          <el-menu-item index="2-1">
            <i class="iconfont icon-wodeshoucang"></i>
            <span>我的收藏</span>
          </el-menu-item>
        </el-submenu> -->
        <!-- 创建的歌单 -->
        <el-submenu index="createPlaylists" :disabled="!isLogin">
          <template #title>创建的歌单</template>
          <el-menu-item
            v-for="(item, index) in createPlaylists"
            :key="index"
            :index="`/playlist/detail?id=${item.id}`">
            <i :class="{ iconfont: true, 'icon-gedan': index !== 0, 'icon-heart': index === 0 }"></i>
            <span>{{ item && item.name }}</span>
          </el-menu-item>
        </el-submenu>
        <!-- 收藏的歌单 -->
        <el-submenu index="collectPlaylists" :disabled="!isLogin">
          <template #title>收藏的歌单</template>
          <el-menu-item
            v-for="(item, index) in collectPlaylists"
            :key="index"
            :index="`/playlist/detail?id=${item.id}`">
            <i class="iconfont icon-gedan"></i>
            <span>{{ item && item.name }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </my-scrollbar>
  </div>
</template>

<script>
import MyScrollbar from 'components/content/perfectscrollbar/MyScrollbar.vue'
import { urlJointQuery } from 'utils'

export default {
  name: 'AsideMenu',
  data () {
    return {
      defaultActive: null,
      createPlaylists: [],
      collectPlaylists: [],
      isAdd: false
    }
  },
  components: {
    MyScrollbar
  },
  computed: {
    // 是否登录
    isLogin () {
      return this.$store.state.isLogin
    },
    // 获取当前的path
    currentPath () {
      // console.log(this.$route.path)
      // if (this.$route.path === '/main/discover') return this.
      if (this.$route.path === '/main/discover') return this.$route.path.match(/(\/[a-z]+){2}/g)[0]
      return urlJointQuery(this.$route.path, this.$route.query)
    },
    // 获取用户歌单
    userPlaylists () {
      return this.$store.state.userPlaylists
    },
    // 获取用户歌单数量信息
    userSubcount () {
      return this.$store.state.userSubcount
    }
  },
  watch: {
    currentPath () {
      this.defaultActive = this.currentPath
    },
    // 获得用户歌单数量信息然后
    userSubcount () {
      if (!this.userPlaylists || this.isAdd || !this.userPlaylists) return false
      this.addPlaylists()
      this.isAdd = true
      // this.$refs.menuRef.open('createPlaylists')
      // this.$refs.menuRef.open('collectPlaylists')
      this.openDefaultMenu()
    },
    userPlaylists () {
      if (!this.userPlaylists || this.isAdd || !this.userSubcount) return false
      this.addPlaylists()
      this.isAdd = true
    }
  },
  created () {
    this.getInitialActive()
    this.$nextTick(() => {
      this.openDefaultMenu()
    })
  },
  methods: {
    // 把用户表单分别添加到data的歌单列表
    addPlaylists () {
      // console.log(this.userPlaylists[0])
      for (let i = 0; i < this.userSubcount.createdPlaylistCount; i++) {
        this.createPlaylists.push(this.userPlaylists[i])
      }
      for (let i = 0; i < this.userSubcount.subPlaylistCount; i++) {
        this.collectPlaylists.push(this.userPlaylists[i + this.userSubcount.createdPlaylistCount])
      }
    },
    // 2. 根据url设置初始active
    getInitialActive () {
      // if (this.$route.path === '/main/discover/recommend') {
      //   return (this.defaultActive = this.$route.path.match(/(\/[a-z]+){2}/g)[0])
      // }
      this.defaultActive = urlJointQuery(this.$route.path, this.$route.query)
    },
    // 3. 默认打开推荐栏
    openDefaultMenu () {
      this.$refs.menuRef.open('recommend')
      this.$refs.menuRef.open('createPlaylists')
      this.$refs.menuRef.open('collectPlaylists')
    }
  }
}
</script>

<style scoped lang="less">
#aside-menu {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  &.show-bottom {
    height: calc(100% - var(--aside--bottom--height))
  }
}
</style>

<style lang="less">
#aside-menu {
  .el-menu {
    background-color: #f5f5f7;
    border: none;
    .el-submenu__title {
      padding-left: 12px!important;
    }
    .el-submenu__title, .el-menu-item {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.7);
      &:hover {
        color: rgba(0, 0, 0);
        background-color: #f5f5f7;
      }
    }
    .el-menu-item {
      color: #5c5c5c;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-right: 30px;
      border: none;
      border-left: 0px solid var(--base--color);
      i {
        position: absolute;
        left: 16px;
      }
      &.is-active {
        padding-left: 36px!important;
        background-color: #e6e7ea;
        border-left: 4px solid var(--base--color);
        &:hover {
          background-color: #e6e7ea;
        }
        i {
          left: 12px;
        }
      }
      &:hover {
        background-color: #f5f5f7;
      }
    }
  }
  .iconfont {
    color: #5c5c5c;
    font-size: 16px;
    transform: translateY(2px);
  }
}
</style>
